<template>
  <div class="timeSelect" v-show="isShowTimeSelect">
    <x-header class="timeSelectHeader" :left-options="{showBack: false}">选择时间
        <a slot="left" @click="onCancle">取消</a>
        <a slot="right" @click="confirm">完成</a></x-header>
    <!--插入验证提示框-->
    <div v-transfer-dom>
      <alert v-model="isShowAlert" > {{alertText}}</alert>
    </div>
    <div class="timeSelectContition">
      <flexbox>
        <flexbox-item >
          <span class="selectCondition" @click="changeTimeCondition('month')"
          :style="{color:(this.isSelectedByWhich === 'month'?'blue':'black')}">按月选择</span>
        </flexbox-item>
        <flexbox-item >
          <span class="selectCondition" @click="changeTimeCondition('day')"
          :style="{color:(this.isSelectedByWhich === 'day'?'blue':'black')}">按日选择</span>
        </flexbox-item>
      </flexbox>
    </div>
    <div style="height: 10%;"></div>
    <!-- 按月选择 -->
    <div v-show="this.isSelectedByWhich === 'month'">
        <div style="text-align: center;">
            <span style="color: blue;">{{timeOfMonth}}</span>
            <hr style="background-color: blue;">
          </div>
          <div>
            <div style="height: 10px;"></div>
            <i class="fa fa-trash-o" @click="clearTime"
            style="font-size:30px;color:gray;float: right;margin-right: 10px;"></i><br>
            <div style="height: 20px;"></div>
            <hr style="background-color: rgb(247, 247, 247);opacity: 30%;">
            <div style="height: 50px;"></div>
            <datetime-view v-model="timeOfMonth" format="YYYY-MM" :end-date="endDate" ></datetime-view>
          </div>
    </div>
    <!-- 按日选择 -->
    <div v-show="this.isSelectedByWhich === 'day'">
        <div style="text-align: center;">
            <span @click="changeBlur('start')" class="daySpan"
            :style="{color:(this.thisBlur==='start'?'blue':'black'),borderColor:(this.thisBlur==='start'?'blue':'black')}">{{timeStart}}</span>
            至
            <span @click="changeBlur('end')" class="daySpan" 
            :style="{color:(this.thisBlur === 'end'?'blue':'black'),borderColor:(this.thisBlur === 'end'?'blue':'black')}">{{timeEnd}}</span>
          </div>
          <div style="height: 10px;"></div>
          <div>
            <div style="height: 10px;"></div>
            <i class="fa fa-trash-o" @click="clearTime"
            style="font-size:30px;color:gray;float: right;margin-right: 10px;"></i><br>
            <div style="height: 20px;"></div>
            <hr style="background-color: rgb(247, 247, 247);opacity: 30%;">
            <div style="height: 50px;"></div>
            <datetime-view v-show="this.thisBlur==='start'" v-model="timeStart" :end-date="endDate" ></datetime-view>
            <datetime-view v-show="this.thisBlur==='end'" v-model="timeEnd" :end-date="endDate" ></datetime-view>
          </div>
    </div>
    

  </div>
</template>

<script>
import {XHeader ,Flexbox, FlexboxItem,DatetimeView,Group } from 'vux'
import {mapState } from 'Vuex'

const map = {}

export default {
  name: 'timeSelect',
  props: {
    isShowTimeSelect: {type: Boolean}
  },
  data () {
    return {
      alertText: '', // 验证提示框的文本
      isShowAlert: false, // 是否显示验证提示,
      timeOfMonth: this.getToday('month'),
      isSelectedByWhich:'month',
      timeStart:this.getToday('day'),
      timeEnd:'结束日期',
      thisBlur:'start',
      timePicked:''
      
    }
  },
  mounted () {
  },
  computed: {
    endDate(){
      return this.getToday('day')
    }
  },
  components: {
    XHeader,
    Flexbox, 
    FlexboxItem,
    DatetimeView,
    Group
  },
  watch: {
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    getToday(item){
      let now = new Date()
      let cmonth = now.getMonth() + 1
      let day = now.getDate()
      if (cmonth < 10) cmonth = '0' + cmonth
      if (day < 10) day = '0' + day
      if(item === 'day'){
        return now.getFullYear() + '-' + cmonth + '-' + day
      }else if(item === 'month'){
        return now.getFullYear() + '-' + cmonth
      }else{
        return now.getFullYear()
      }
    },
    changeTimeCondition(item){
      this.isSelectedByWhich = item
    },
    clearTime(){
      if(this.isSelectedByWhich === 'month'){
        this.timeOfMonth = '选择月份'
      }else if(this.isSelectedByWhich === 'day'){
        this.timeStart = '开始日期'
        this.timeEnd = '结束日期'
        this.thisBlur = 'none'//控制blur的选中样式不显示
      }
      
    },
    changeBlur(item){
      if(item === 'start'){
        if(this.timeStart === '开始日期'){
          this.timeStart = this.getToday('day')
        }
        this.thisBlur = 'start'
      }else{
        if(this.timeEnd === '结束日期'){
          this.timeEnd = this.getToday('day')
        }
        this.thisBlur = 'end'
      }
    },
    confirm(){
      if(this.isSelectedByWhich === 'month' && this.timeOfMonth!=='选择月份'){
        this.$emit('func',{type:'month',value:this.timeOfMonth})
      }else if(this.isSelectedByWhich === 'day'){
          if(this.timeStart==='开始日期' && this.timeEnd==='结束日期'){
            this.$emit('update:isShowTimeSelect',false)
          }else if(this.timeStart!=='开始日期' && this.timeEnd==='结束日期'){
            this.$emit('func',{type:'day',value:{timeStart:this.timeStart,timeEnd:this.timeStart}})
          }else if(this.timeStart==='开始日期' && this.timeEnd!=='结束日期'){
            this.$emit('func',{type:'day',value:{timeStart:this.timeEnd,timeEnd:this.timeEnd}})
          }else{
            this.$emit('func',{type:'day',value:{timeStart:this.timeStart,timeEnd:this.timeEnd}})
          }
      }
      this.$emit('update:isShowTimeSelect',false)
    },
    onCancle(){
      this.$emit('update:isShowTimeSelect',false)
    }
  }
}

</script>

<style lang="less">
  
  .timeSelect{
    width:100%;
    height: 100%;
    background: rgba(255,255,255);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 200;
    /* display: flex; */
  }
  .timeSelectContition{
    margin:10% 0 0 18%;
      /* margin:10% 0 0 8%; */

  }
  .selectCondition{
    padding: 8px;
    background-color: rgb(237,237,237);
    border: 1px rgb(237,237,237) solid;
    border-radius: 40%;
  }
  .daySpan{
    border-bottom: 1px black solid;
    padding:0 30px 10px 30px; 
  }

</style>
